<template>
  <div class="details">
    <div class="detailTitle">
      <div
        v-for="(item, index) in typeList"
        :key="item.id"
        :class="{ active: selectIndex == index }"
        @click="selectIndexs(index)"
      >
        {{
          item.title == "用户评价"
            ? item.title + "(" + commentsNum + ")"
            : item.title
        }}
      </div>
    </div>
    <div
      v-show="selectIndex == 0"
      class="tagContent"
    >
      <div
        class="desc"
        v-html="description"
      />
    </div>
    <div
      v-if="selectIndex == 1"
      class="tagContent"
    >
      <ul style="margin-left: 2rem">
        <li
          v-for="d in detail.lsSpecs"
          :key="d.id"
        >
          {{ d.cName }}：<span
            v-for="s in d.lsSpecItem"
            :key="s.id"
          >{{
            s.cSpecItemName
          }}</span>
        </li>
      </ul>
    </div>
    <!-- <div
      v-if="selectIndex == 2"
      class="tagContent"
    >
      3
    </div> -->
    <div
      v-show="selectIndex == 2"
      class="tagContent"
    >
      <Comment
        ref="comment"
        @setcommentsNum="setcommentsNum"
      />
    </div>
  </div>
</template>

<script>
import Comment from "../fruit/comment.vue";
export default {
  components: {
    Comment,
  },
  props: {
    detailType: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      typeList: [
        {
          title: "商品详情",
          id: 1,
          isActive: false,
        },
        {
          title: "规格参数",
          id: 2,
          isActive: true,
        },
        // {
        //   title: "产品溯源",
        //   id: 3,
        //   isActive: false,
        // },
        {
          title: "用户评价",
          id: 3,
          isActive: false,
        },
      ],
      commentsNum: 0,
      selectIndex: 0,
      description: "",
      detail: {},
    };
  },
  mounted() {
    // this.setInfo(this.detailType)
  },
  methods: {
    selectIndexs(index) {
      this.selectIndex = index;
    },
    getData(item) {
      console.log('item', item)
      this.detail = item;
      this.description = item.description;
      this.commentsNum = 0;
      this.$refs.comment.getList(this.detail);
    },
    setcommentsNum(val) {
      this.commentsNum = val;
    },
  },
};
</script>
<style>
.desc {
  width: 100%;
}

.desc img {
  width: 100%;
}
</style>
<style scoped lang="scss">
.details {
  padding: 3rem 16.19rem 0;

  div.detailTitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    padding: 1.75rem 0 1.5rem;
    font-size: 1.13rem;
    color: #fff;

    > div {
      cursor: pointer;
      width: 25%;
      text-align: center;

      &.active {
        color: #f0406f;
      }
    }
  }

  .tagContent {
    padding: 2.5rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    ul {
      li {
        list-style: disc;
        color: #999;
        font-size: 0.88rem;
        line-height: 3.38rem;
      }
    }

    > img {
      width: 100%;
    }
  }
}
</style>
